<template>
  <div class="bread-crumb">
    <Icon
      class="icon"
      style="font-size: 20px"
      type="ios-arrow-back"
      @click="goback"/>
    <div
      :title="$t('message.process.GZLKF')"
      class="workflow-dev">
      <svg t="1572505474223" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1741" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="18">
        <path d="M1003.52 797.696c-12.6976-4.9664-20.736-20.5824-36.1984-18.3808-39.2704 5.632-41.7792-16.0768-40.8576-47.3088 2.048-69.376 0.1024-138.8032 0.8704-208.2304 0.3584-36.1472-16.4864-50.432-51.7632-50.176-97.6896 0.8704-195.4304-1.024-293.0688 1.2288-30.208 0.7168-39.1168-9.0112-34.3552-36.5056 0.2048-1.28 0-2.56 0-3.8912 0.7168-35.84-11.52-81.152 5.8368-104.96 16.7424-23.04 64.768-6.144 98.9696-7.3216 29.952-1.024 46.592-14.848 46.9504-44.032 0.9216-71.9872 0.1024-143.9744 0.3584-215.9616 0.1024-18.176-12.3392-29.696-20.6848-43.52h-339.456c-16.128 17.92-21.6576 38.5536-21.1968 62.8224 1.1264 61.6448-0.0512 123.392 0.512 185.0368 0.4608 43.3664 11.9808 54.272 54.9376 55.296 2.56 0.0512 5.12-0.1536 7.68 0.0512 29.0304 2.56 78.336-11.3664 83.456 6.0416 12.3904 42.6496 6.5536 91.1872 4.608 137.216-0.6656 15.872-18.944 8.4992-28.9792 8.5504-96.3584 0.5632-192.7168 0.3072-289.1264 0.3584-48.8448 0-59.2384 9.9328-59.392 57.5488-0.1536 73.216-0.6144 146.4832 0.3584 219.7504 0.256 19.3024-4.096 29.5936-25.2928 26.6752-20.6336-2.8672-35.84 9.1136-51.5072 19.7632v185.088l23.1424 23.1424h223.6928c14.1312-17.408 19.8144-36.9664 19.1488-59.648-1.1264-38.5024 0.256-77.056-0.512-115.5072-0.8192-41.472-11.3152-51.3024-53.4528-52.8896-59.4944-2.1504-59.4944-2.1504-59.4944-61.2864 0-47.5136 0.8192-95.0272-0.3584-142.4896-0.4096-18.5344 5.5808-24.064 23.9616-23.8592 86.016 0.8192 172.032 0.768 258.048 0 17.2032-0.1536 21.6576 5.7344 21.504 22.1184a6743.552 6743.552 0 0 0 0 181.0432c0.2048 17.2544-3.2768 24.064-22.8864 25.088-91.7504 4.608-91.648 5.4272-91.648 99.5328 0 21.8624 1.1264 43.7248-0.3584 65.4336-1.6384 24.4224 4.9152 45.0048 21.76 62.464h262.2464c16.8448-17.4592 22.8352-38.0416 21.8112-62.464-1.536-35.84-0.0512-71.8336-0.512-107.776-0.512-45.568-11.5712-56.576-56.832-57.8048-57.2416-1.536-57.2416-1.536-57.2416-59.136 0-47.5136 0.8704-95.0272-0.512-142.4896-0.512-19.8144 4.7616-26.4192 25.5488-26.112 84.6848 1.1264 169.4208 0.9216 254.1568 0.1024 18.432-0.2048 24.2176 5.3248 23.9616 23.808-1.024 60.3648-1.1264 120.7296 0 181.0432 0.3584 19.8144-8.2432 22.4256-25.1904 23.1936-88.32 3.8912-88.32 4.352-88.32 94.8736 0 23.04 0.9728 46.2336-0.3072 69.2736-1.2288 23.8592 3.7376 45.056 19.1488 63.488h223.6928l23.0912-23.1424v-185.088z" p-id="51391" fill="#3d9cf0"></path>
      </svg>
      {{ $t('message.process.GZLKF')}} /
    </div>
    <div
      class="bread-crumb-container"
      v-if="list.length || last.name">
      <div
        v-for="(item, index) in list"
        :key="index"
        v-show="item.show"
        ref="item"
        class="bread-crumb-item">
        <span
          @click="handleClick(item, false)"
          class="bread-crumb-item-label"
          :title="item.name"
          :class="{'isActive': item.isActive}">{{ item.name }}</span>
        <span class="bread-crumb-item-divider">/</span>
      </div>
      <Poptip
        v-if="showEllipsis"
        trigger="hover"
        popper-class="poptip-wrap">
        <div class="bread-crumb-item">
          <span class="bread-crumb-item-label">...</span>
          <span class="bread-crumb-item-divider">/</span>
        </div>
        <div slot="content">
          <div
            v-for="(item) in list"
            :key="item.name">
            <span
              @click="handleClick(item, false)"
              class="bread-crumb-item-label"
              :title="item.name">{{ item.name }}</span>
            <span class="bread-crumb-item-divider">/</span>
          </div>
          <div
            class="bread-crumb-item">
            <span
              class="bread-crumb-item-label isActive"
              :title="last.name">{{ last.name }}</span>
          </div>
        </div>
      </Poptip>
      <div
        class="bread-crumb-item">
        <span
          class="bread-crumb-item-label isActive"
          :title="last.name">{{ last.name }}</span>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      maxIndexNum: 1,
      isPopoverShow: false,
      list: [],
      last: {},
    };
  },
  computed: {
    showEllipsis() {
      return this.list.some((item) => {
        return !item.show;
      });
    },
  },
  watch: {
    'dataList'() {
      this.change();
    },
  },
  mounted() {
    this.change();
  },
  methods: {
    change() {
      let dataList = this.dataList;
      this.list = dataList.slice(0, dataList.length - 1).map((item, index) => {
        return Object.assign({}, item, {
          show: true,
        });
      });
      this.last = dataList[dataList.length - 1] || {};
      this.$nextTick(() => {
        // 拿到面包屑的数量，用于计算页面可容纳的最大面包屑数量
        const itemList = this.$refs.item;
        if (!itemList) {
          return;
        }
        const len = itemList.length;
        // 获取页面宽度
        const maxWidth = this.$el.clientWidth;
        let width = 0;
        // 记录可容纳的最大面包屑数量
        this.maxIndexNum = this.list.length;
        for (let i = 0; i < len; i++) {
          width += itemList[i].clientWidth;
          if (width > maxWidth - 200) {
            this.maxIndexNum = i;
            break;
          }
        }
        this.list.forEach((item, index) => {
          if (index < this.maxIndexNum) {
            item.show = true;
          } else {
            item.show = false;
          }
        });
      });
    },
    goback() {
      this.$emit('goback');
    },
    handleClick(item, isOuter) {
      if (!isOuter) {
        this.list.forEach((o, index) => {
          if (o.name === item.name) {
            o.isActive = true;
          } else {
            o.isActive = false;
          }
        });
      }
      this.$emit('breadcrumbClick', item);
    },

  },
};
</script>
<style lang="scss" scoped src="./index.scss">

</style>
